<template>
  <div class="header publicZIndexHeader">
    <div class="notify publicHvCenter" v-show="broadContent">
      <img src="@/assets/image/hdBar/broadIcon.png" class="broadIcon" />
      <div class="notifyCt" ref="ct">
        <div class="notifyText" ref="ctTxt">{{ broadContent }}</div>
      </div>
    </div>
    <div class="userCenter">
      <div class="userInfo publicVCenter">
        <div class="onlineNum">在线人数:{{ onlineNum }}</div>
        <div class="moatEntry" v-tap="{ methods: toMoat }">
          <img src="@/assets/image/icon/logoIcon.png" class="logoIcon" />
          <img src="@/assets/image/icon/moatText.png" class="moatText" />
        </div>
        <div class="headImgBox publicHvCenter">
          <img :src="headImg" alt v-tap="{ methods: toUserCenter }" class="headImg" />
        </div>
      </div>
    </div>
    <div class="wifiIcon" v-if="wifi" v-tap="{ methods: copyWifi }"></div>
  </div>
</template>
<script>
import { mapState, mapMutations } from 'vuex';
import { POPUP_MODULE } from '@/assets/constant/index';
import { timeoutTask } from '@/utils/index';

const wx = require('weixin-js-sdk');

let endBroadAni = false;
let broadAniLock = false;

export default {
  name: 'myHeader',
  computed: {
    ...mapState({
      name: (state) => state.user.name,
      headImg: (state) => state.user.headImg,
      gender: (state) => state.user.gender,
      rechargeList: (state) => state.live.rechargeList,
      currentStatus: (state) => state.user.currentStatus,
      deskNum: (state) => state.user.deskNum,
      editUserInfoPrice: (state) => state.app.editUserInfoPrice,
      broadContent: (state) => state.live.broadContent,
      onlineNum: (state) => state.live.onlineNum,
      wifi: (state) => state.live.wifi,
    }),
  },
  data() {
    return {
      qrcodeModuleKey: POPUP_MODULE.qrcodeModule.key,
    };
  },
  watch: {
    broadContent(newVal) {
      if (newVal) {
        this.$nextTick(() => {
          this.broadInnerWidth = this.$refs.ct.offsetWidth * 0.13;
          this.broadContentWidth = this.$refs.ctTxt.offsetWidth * 0.13;
          this.startBroadAni();
        });
      }
    },
  },
  mounted() {
    endBroadAni = false;
    broadAniLock = false;
    if (this.broadContent) {
      this.broadInnerWidth = this.$refs.ct.offsetWidth * 0.13;
      this.broadContentWidth = this.$refs.ctTxt.offsetWidth * 0.13;
      this.startBroadAni();
    }
  },
  methods: {
    ...mapMutations({
      togglePopup: 'app/togglePopup',
    }),
    toUserCenter() {
      wx.miniProgram.navigateTo({
        url: `/pages/userCenter/userCenter?openId=${this.$store.state.user.openId}&userId=${this.$store.state.user.userId}&money=${this.$store.state.user.money}&hbyMoney=${this.$store.state.user.hbyMoney}&rechargeListStr=${this.rechargeList}&name=${this.name}&headImg=${this.headImg}&gender=${this.gender}&deskNum=${this.deskNum}&currentStatus=${this.currentStatus}&editUserInfoPrice=${this.editUserInfoPrice}`,
      });
      console.log(
        `/pages/userCenter/userCenter?openId=${this.$store.state.user.openId}&userId=${this.$store.state.user.userId}&money=${this.$store.state.user.money}&hbyMoney=${this.$store.state.user.hbyMoney}&rechargeListStr=${this.rechargeList}&name=${this.name}&headImg=${this.headImg}&gender=${this.gender}&deskNum=${this.deskNum}&currentStatus=${this.currentStatus}&editUserInfoPrice=${this.editUserInfoPrice}`,
      );
    },
    openPopupModule(e) {
      this.togglePopup(e.key);
    },
    startBroadAni() {
      if (endBroadAni) {
        return;
      }
      if (broadAniLock) {
        return;
      }
      broadAniLock = true;
      const tmpDistance = this.broadInnerWidth + this.broadContentWidth;
      const tmpDuration = parseInt(tmpDistance / 4, 10);
      if (this.$refs.ctTxt) {
        this.$refs.ctTxt.style.transition = `transform ${tmpDuration}s linear`;
        this.$refs.ctTxt.style.transform = `translate3d(-${tmpDistance}vw,0vw,0vw)`;
      }
      console.log(tmpDuration);
      timeoutTask(() => {
        broadAniLock = false;
        if (this.$refs.ctTxt) {
          this.$refs.ctTxt.style.transition = 'none 0s linear 0s';
          this.$refs.ctTxt.style.transform = 'translate3d(0vw,0vw,0vw)';
        }
        timeoutTask(() => {
          this.startBroadAni();
        }, 500);
      }, tmpDuration * 1000);
    },
    copyWifi() {
      this.$copyText(`${this.wifi}`).then(
        (res) => {
          console.log(res);
          this.$toast.center(`无线网密码:${this.wifi} 复制成功!`);
        },
        (err) => {
          console.log(err);
          this.$toast.center('无线网密码复制失败!');
        },
      );
    },
    toMoat() {
      this.$router.push({
        path: '/moat',
      });
    },
  },
  beforeDestroy() {
    endBroadAni = true;
    broadAniLock = false;
  },
};
</script>
<style lang="less" scoped>
.header {
  width: 100%;
  position: absolute;
  top: 0;
  .notify {
    width: 100%;
    padding-top: 16px;
    font-size: 20px;
    font-weight: 500;
    color: #8e8ab8;
    .broadIcon {
      width: 24px;
      height: 24px;
      margin-right: 4px;
    }
    .notifyCt {
      width: 428px;
      height: 30px;
      overflow: hidden;
      position: relative;
      line-height: 30px;
      .notifyText {
        position: absolute;
        white-space: nowrap;
        transition-property: transform;
        transition-timing-function: linear;
        left: 428px;
      }
    }
  }
  .userCenter {
    display: flex;
    justify-content: flex-end;
    padding-right: 32px;
    margin-top: 22px;
    .userInfo {
      flex-direction: column;
      .onlineNum {
        font-size: 24px;
        font-weight: 500;
        color: #fffaba;
      }
      .moatEntry {
        width: 127px;
        height: 140px;
        background-image: url('../../../assets/image/icon/moatCrown.png');
        background-size: 100% 100%;
        position: relative;
        left: 2vw;
        .logoIcon {
          width: 72px;
          height: 70px;
          position: absolute;
          left: 1.7vw;
          top: 8vw;
        }
        .moatText {
          width: 84px;
          height: 62px;
          position: absolute;
          top: 14vw;
          left: 1.3vw;
        }
      }
      .headImgBox {
        width: 88px;
        height: 88px;
        background-color: #ffffff;
        border-radius: 50%;
        position: relative;
        margin-top: 22px;
        .headImg {
          width: 84px;
          height: 84px;
          border-radius: 50%;
        }
      }
    }
  }
  .wifiIcon {
    width: 64px;
    height: 64px;
    background-image: url('../../../assets/image/icon/wifiIcon.png');
    background-size: 100% 100%;
    position: absolute;
    left: 32px;
    top: 122px;
  }
}
@media screen and (max-height: 709px) {
  .header {
    .userCenter {
      .userInfo {
        .moatEntry {
          transform: scale(0.8);
        }
        .headImgBox {
          transform: scale(0.8);
          margin-top: -1vw;
        }
      }
    }
  }
}
</style>
